<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
import { color } from "highcharts";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "200px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Object,
      required: false,
    },
  },
  data() {
    return {
      option: {},
      line: "line",
      color: [
        "#B5C706",
        "#76D305",
        "#00EB43",
        "#00F78C",
        "#00ECB8",
        "#00B6DF",
        "#003EB4",
        "#0018FE",
        "#5B00F4",
        "#48008B",
      ],
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
    line: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    console.log("this.chartData");
    console.log(this.chartData);
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    randomColor() {
      return "#" + Math.floor(Math.random() * 0xffffff).toString(16);
    },
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },

    setOptions() {
      let source = [];
      source.push([
        "quarter",
        "5m",
        "10m",
        "15m",
        "20m",
        "25m",
        "30m",
        "35m",
        "40m",
        "45m",
        "50m",
      ]);
      let series = [];
      this.chartData.scatterData.forEach((item) => {
        source.push(item);
        series.push({
          name: item[0],
          type: this.line,
          seriesLayoutBy: "row",
          symbolSize: 10,
        });
      });
      console.log(source);
      this.option = {
        toolbox: {
          top: 30,
          right: '10%',
          itemSize: 20,
          feature: {
            myTool1: {
              show: true,
              title: "切换",
              icon: "path://M971.64 699.44l-59.87-117.08a25 25 0 0 0-33.64-10.88L761 631.34a25 25 0 0 0 22.76 44.52l61.72-31.55c-63.77 141.46-204.11 233.6-362.61 233.6-174.55 0-327.09-111.74-379.57-278a25 25 0 1 0-47.68 15A448.77 448.77 0 0 0 215.6 839.44c77.71 57.88 170.15 88.47 267.31 88.47s189.59-30.59 267.3-88.47a449.14 449.14 0 0 0 144-181.68l33 64.45a25 25 0 0 0 44.52-22.77zM93.06 461.29a25 25 0 0 0 11.36-2.75L222.86 398a25 25 0 0 0-22.77-44.51L137 385.75c64.39-143.61 206.66-237.21 367.38-237.21C681 148.54 835.42 261.65 888.55 430a25 25 0 1 0 47.68-15 453.55 453.55 0 0 0-161.69-227c-78.55-58.5-172-89.43-270.21-89.43S312.67 129.47 234.12 188A454 454 0 0 0 88.35 372.19l-33.61-65.73a25 25 0 1 0-44.52 22.76l60.56 118.44a25 25 0 0 0 22.28 13.63z",
              onclick: () => {
                this.line = this.line == "line" ? "scatter" : "line";
                this.chart.setOption(this.option, true);
              },
            },
          },
        },
        legend: {
          bottom: 5,
          right: 3,
          orient: "vertical",
          textStyle: {
            fontSize: 12, //字体大小
            color: "#82e6ff", //字体颜色
          },
        },
        tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        },
        position: function (pos, params, el, elRect, size) {
          var obj = { top: 50 };
          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
          return obj;
        },
        extraCssText: 'width: 170px'
      },


        grid: {
          left: 2,
          right:'20%',
          top:32,
          bottom: 0,
          containLabel: true
        },
        xAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} ℃",
          },
          position: "top",
          axisLine: {
            onZero: false,
          },
          splitLine: { show: false },
        },
        yAxis: {
          type: "category",
          inverse: true,
          splitLine: { show: false },
        },
        dataset: {
          source: source,
        },
        series: series,
      };
      this.chart.setOption(this.option);
    },
  },
};
</script>
